<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .container {
            width: 80%;
            height: 100vh;
            border: 1px solid salmon;
            background-color: gray;
            margin: 20px auto 0;
            position: relative;

            overflow: hidden;
        }
        .content {
            /* width: 300%; */
            height: 100vh;
            overflow: hidden;


        }

        .content ul {
            /* width: 33.33%; */
            height: 100vh;
            float: left;
            overflow: hidden;
        }

        .content ul:nth-of-type(1) {
            background-color: red;
        }
    
        .content ul:nth-of-type(2) {
            background-color: yellow;
        }
        
        .content ul:nth-of-type(3) {
            background-color: blue;
        }
        
        .content ul:nth-of-type(4) {
            background-color: pink;
        }
        
        .content ul:nth-of-type(5) {
            background-color: violet;
        }

        .content ul li {
            /* width: 25%; */
            height: 100vh;
            float: left;
            border: 2px solid black;
        }
        .container .control {
            height: 50px;
            position: absolute;
            bottom: 50px;
            left: 40%;
            /* background-color: skyblue; */
        }
        .control button{
            width: 60px;
            height: 40px;
            border-radius: 15px;
            background-color: springgreen;
            margin-right: 5px;
        }
        .control button.active{
        background:yellow;
        }
    </style>
</head>
<body>
    <!-- <div class="container">
        <div class="content">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>

            </ul>
            
            <ul>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
            <ul>
                <li>9</li>
            </ul>
        </div>

        <div class="control">
            <button class="prev">preve</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button class="next">next</button>            

        </div>

    </div> -->

    <script>
        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        
        let items = window.prompt('input:')
        items = parseInt(items)

        let pages = Math.ceil(arr.length / items);
        
        let containerDom = document.createElement('div')
        containerDom.className = 'container'

        let contentDom = document.createElement('div')
        contentDom.className = 'content'
        contentDom.style.width = pages * 100 + '%'
        for (let i = 1;i <= pages;i ++ ) {
            let ulDom = document.createElement('ul')
            ulDom.style.width = 100 / pages + '%';
            for (let j = 0;j < items;j ++ ) {
                let liDom = document.createElement('li')
                liDom.style.width = 100 / items + '%'
                liDom.innerHTML = arr[0]
                arr.shift()
                ulDom.appendChild(liDom)
                if (arr.length == 0) {
                    break;
                }
            }
            contentDom.appendChild(ulDom)
        }

        containerDom.appendChild(contentDom)

        let controlDom = document.createElement('div')
        controlDom.className = 'control'
        let preDom = document.createElement('button')
        preDom.className = 'prev'
        preDom.innerHTML = 'prev'

        controlDom.appendChild(preDom)

        for (let i = 0;i < pages;i ++ ) {
            let buDom = document.createElement('button')
            buDom.innerHTML = i + 1
            controlDom.appendChild(buDom)
        }

        let nextDom = document.createElement('button')
        nextDom.className = 'next'
        nextDom.innerHTML = 'nextDom'

        controlDom.appendChild(nextDom)


        let curr = 1
        let alert = 1
        controlDom.children[curr].className = 'active'
        
        function gonext(){
       
                contentDom.style.marginLeft = -alert * 100 + '%'
                controlDom.children[curr].className = ''
                // console.log(curr)
                curr ++ 
                alert ++
                alert %= pages
                if (curr > pages) {
                    curr = curr % (pages + 1) + 1
                }
                // console.log(curr)

                controlDom.children[curr].className = 'active'

        }

        /*
        1 300
        2 0
        3 100
        4 200

        1 200
        2 0
        3 100 
        
        */
        function goprev() {

            contentDom.style.marginLeft = -(((curr - 2) + pages) % pages) * 100 + '%'
            controlDom.children[curr].className = ''
            // console.log(curr)
            curr -- 
            alert --
            alert = (alert + pages) % pages
            if (curr <= 0) {
                curr = curr + pages
            }

                // console.log(curr)

            controlDom.children[curr].className = 'active'
        }

        controlDom.children[pages + 1].addEventListener('click', function(){
            gonext()

        })
        controlDom.children[0].addEventListener('click', function(){
            goprev()

        })

        containerDom.appendChild(controlDom)
        document.body.appendChild(containerDom)
        



    </script>
</body>


</html>